<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Insert title here</title>
	<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../themes/icon.css">
	<script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="../jquery.easyui.min.js"></script>
	<script>
		$(function(){
			$('#test').datagrid({
				title:'My Title',
				iconCls:'icon-save',
				width:600,
				height:350,
				nowrap: false,
				striped: true,
				url:'datagrid_data.json',
				sortName: 'code',
				sortOrder: 'desc',
				idField:'code',
				frozenColumns:[[
				                {field:'ck',checkbox:true},
				                {title:'code',field:'code',width:80,sortable:true}
				]],
				columns:[[
				          {title:'Base Information',colspan:3},
							{field:'opt',title:'操作',width:100,align:'center', rowspan:2,
								formatter:function(value,rec){
									return '<span style="color:red">Edit Delete</span>';
								}
							}
				          
				],[
							{field:'name',title:'名称',width:120},
							{field:'addr',title:'地址',width:120,rowspan:2,sortable:true},
							{field:'col4',title:'Col41',width:150,rowspan:2}
				]],
				pagination:true,
				rownumbers:true,
				singleSelect:false,
				toolbar:[{
					text:'Add',
					iconCls:'icon-add',
					handler:function(){
						alert('add')
					}
				},{
					text:'Cut',
					iconCls:'icon-cut',
					handler:function(){
						alert('cut')
					}
				},'-',{
					text:'Save',
					iconCls:'icon-save'
				}],
				onSortColumn:function(sort,order){
					alert(sort+":"+order)
				}	
			});
		});
		function resize(){
			$('#test').datagrid({
				title: '新标题',
				striped: true,
				width: 650,
				loadMsg:'正在处理，请稍待。。。',
				queryParams:{
					a:'abc',
					name:'sjx'
				}
			});
		}
		function getSelected(){
			var selected = $('#test').datagrid('getSelected');
			alert(selected.code+":"+selected.name);
		}
		function getSelections(){
			var ids = [];
			var rows = $('#test').datagrid('getSelections');
			for(var i=0;i<rows.length;i++){
				ids.push(rows[i].code);
			}
			alert(ids.join(':'))
		}
		function myformatter(value,rec){
			return 'a:'+value+'>'+rec.name;
		}
	</script>
</head>
<body>
	<h1>DataGrid</h1>
	<div>
		<a href="#" onclick="resize()">resize</a>
		<a href="#" onclick="getSelected()">getSelected</a>
		<a href="#" onclick="getSelections()">getSelections</a>
	</div>
	
	<table id="test"></table>
</body>
</html>